<template>
  <div class="page-warp h-f bg-grey-200">

    <div class="header-warp">
      <div class="sticky-headers sticky bg-white">

      </div>
    </div>

    <div class="m-content">
      <div class="m-warp ">

        <template v-for="item in list.rows" :key="item['pso_id']">
          <collection-card prod :is-expand="true">
            <template #title>
              <span style="top: 8px;position:relative;">{{ item['bii_unicode'] }}</span>
<!--              <span style="top: 8px;position:relative;">-->
<!--                <image class="image-icon-md ml-2"-->

<!--                       src="@/assets/icons/png/merge.png" alt=""-->
<!--                />-->
<!--              </span>-->
            </template>

            <collection-card-cell :prod="false"
                                  :state-type="proStateMap"
                                  :state="-1"
                                  :footer="true"
            >
              <ul class="text-list line-h-lg">
                <li class="li-item">
                  <span class="title">工单编码：</span>
                  <span class="value">{{ getPbName(item['prod_order_work_code']) }}</span>
                </li>
                <li class="li-item">
                  <span class="title">工序：</span>
                  <span class="value">{{ item['pptl_name'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">班组：</span>
                  <span class="value">{{ item['work_name'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">物料编码：</span>
                  <span class="value">{{ (item['bii_code']) }}</span>
                </li>
                <li class="li-item">
                  <span class="title">物料名称：</span>
                  <span class="value">{{ item['bii_name'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">关重件：</span>
                  <span class="value">
                    <state-notifier
                      :config="staticDict.STD_CONFIG.KEYM"
                      text-only
                      inline
                      :state="item['bii_importance'] + ''"
                    />
                  </span>
                </li>
                <li class="li-item">
                  <span class="title">唯一标识码：</span>
                  <span class="value">{{ item['bii_unicode'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">出厂编码：</span>
                  <span class="value">{{ item['deliverytNo'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">出厂日期：</span>
                  <span class="value">{{ item['deliverytDate'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">仓库库位：</span>
                  <span class="value">{{ item['bwl_id'] }}</span>
                </li>
              </ul>

              <template #footer>
                <div class="prod-footer">
                  <div class="footer-btn">
                    <button class="uni-button uni-btn-mini" size="mini" type="primary"
                            @click="printLabel(item)">打印标签
                    </button>
                  </div>
                </div>
              </template>
            </collection-card-cell>
          </collection-card>
        </template>

        <LoadingFooter
          :data="list.rows"
          :total="list.total"
          :loading="loadingStore.ILOADING"
          @load="loadMore"
          :h-offset="44"
        />
      </div>

    </div>
  </div>
</template>

<script setup>
import CollectionCard from '../../components/CollectionCard'
import CollectionCardCell from '../../components/CollectionCardCell'
import { reactive } from 'vue'
import { debounce } from 'radash'
import { PageUtil } from '@/utils/PageUtil'
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { SystemConfig } from '../../utils/SystemConfig'
import LoadingFooter from '../../components/LoadingFooter.vue'
import { useLoading } from '../../store/LoadingStore'

import StateNotifier from '../../components/StaticDictionary/StateNotifier.vue'
import { useStaticTypeDictionaries } from '../../components/StaticDictionary/StaticTypeDictionaries'

const staticDict = useStaticTypeDictionaries()
const stockStore = useStocksStore()
const loadingStore = useLoading()
const list = reactive({
  rows: [],
  total: 0
})

const tagName = function(assist_flg) {
  const names = { // 00-零部件、01-调试、02-跑合、03-其他
    '00': '零部件',
    '01': '调试',
    '02': '跑合',
    '03': '其他'
  }
  return names[assist_flg]
}

const getPbName = function(value) {
  const _v = value || ''
  const [v] = _v.split(';')
  return v
}

const queryParams = reactive({
  limit: 1,
  size: 20
})

const proStateMap = {
  0: ''
}

const searchList = function() {
  loadingStore.NEW_LIST()
  queryParams.limit = 1
  queryList()
}

const queryList = function() {
  debounceQuery()
}


const debounceQuery = debounce({ delay: 300 }, () => {
  loadingStore.SET_LOADING()
  stockStore.getBarCodeItemList({
    ...queryParams
  }).then((res) => {
    let {
      Rows = [], Total = 0
    } = res || {}
    if (loadingStore.isLoadMore(list.rows, Total)) {
      console.log('concat')
      list.rows = list.rows.concat(Rows)
    } else {
      console.log('new rows')
      list.rows = Rows
    }
    list.total = Total
    loadingStore.FINISH_ALL()
    uni.stopPullDownRefresh()
  })
})

const loadMore = function() {
  if (loadingStore.ILOADING) {
    return
  }
  const { total = 0, rows = [] } = list
  if (loadingStore.hasMore(rows, total)) {
    queryParams.limit += 1
    debounceQuery()
  }
}

const printLabel = function(item) {
  PageUtil.addEvent(
    'mfg-list-print-view',
    () => {
      queryList()
    }, {
      route: '../printdemo/index',
      params: {
        row: {
          ...item
        }
      }
    }
  )
}


onLoad(() => {
  loadingStore.NEW_LIST()
  const config = SystemConfig.getSetting()
  console.log(config)
  const {entity_code} = config || {}
  const selected_ws = SystemConfig.getWorkStation() || []
  let sts = selected_ws.map(x => x['station_id'])
  queryParams.stationIdList = sts.join(',')
  queryParams.entity_code = entity_code
  queryList()
})

onShow(() => {

})

onPullDownRefresh(() => {
  searchList()
})
onReachBottom(() => {
  loadMore()
})
</script>

<style lang="scss" scoped>
@import "@/assets/PageCommon.scss";

.page-warp {
  .header-warp {
    &:after {
      height: 0;
    }
  }
  .m-content {

    .prod-footer {
      display: flex;
      align-items: center;
      justify-content: center;

      .footer-btn {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
